<template>
	<u-upload :fileList="imgList" @afterRead="afterRead"
		@delete="deletePic" name="1" multiple :maxCount="maxCount"
		:previewFullImage="true" :width="uploadWidth" :height="uploadHeight" :deletable="deletable">
		<view class="upload-after" :style="{width:uploadWidth,height: uploadHeight}">
			<u-icon :name="name" :size="iconSize" color="#eee"></u-icon>
		</view>
	</u-upload>
</template>

<script>
	import {uploadFilePromise} from "@/utils/index.js"
	import {
		baseUrl
	} from '@/config' 
	export default {
		data() {
			return {
				imgList: [],
				baseUrl
			}
		},
		props:{
			nameProp: {
				type: String
			},
			maxCount: {
				type: Number,
				default: 1
			},
			imagePath: {
				type: String,
				default: ''
			},
			deletable: {
				type: Boolean,
				default: true
			},
			name: {
				type: String,
				default: 'plus'
			},
			uploadWidth: {
				type: String,
				default: '198rpx'
			},
			uploadHeight: {
				type: String,
				default: '198rpx'
			},
			iconSize: {
				type: String,
				default: '60rpx'
			}
		},
		watch: {
			imagePath(n, o) {
				if(n != '') {
					let list = n.split(",");
					this.imgList = list.map(ele => {
						return {
							url: baseUrl + ele
						}
					})
				}
			}
		},
		methods: {
			uploadFilePromise,
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				// let fileListLen = this.fileImage[`${event.name}`].length
				let fileListLen = this.imgList.length;
				lists.map((item) => {
					// this.fileImage[`${event.name}`].push({
					// 	...item,
					// 	status: 'uploading',
					// 	message: '上传中'
					// })
					this.imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i].url);
					const result = await this.uploadFilePromise(lists[i].url)
					// 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
					// let item = this.fileImage[`${event.name}`][fileListLen]
					// this.fileImage[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					// 	status: result.code,
					// 	message: result.code != '200' ? '上传失败' : '',
					// 	url: result.fileName
					// }))
					let item = this.imgList[fileListLen];
					this.imgList.splice(fileListLen, 1, Object.assign(item, {
						status: result.code,
						message: result.code != '200' ? '上传失败' : '',
						url: result.fileName
					}))
					fileListLen++
				}
				let list =  this.imgList.map(ele => {
					let url = ele.url;
					if(url.includes(baseUrl)) {
						url = url.replace(baseUrl, '');
					}
					return url;
				})
				this.$emit("changeFile", list.join(","))
			},
			deletePic(e) {
				this.imgList.splice(e.index, 1);
				let list =  this.imgList.map(ele => {
					let url = ele.url;
					if(url.includes(baseUrl)) {
						url = url.replace(baseUrl, '');
					}
					return url;
				})
				this.$emit("changeFile", list.join(","))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload-after {
		background: #F6F8FA;
		// width:198rpx;
		// height:198rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>